<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="handleArr">点击---数组</button>
    <br>
    <button @click="handleObj">点击---对象</button>
    <ul>
        <h1>数组</h1>
        <li v-for="item in arr" :key="item">{{item}}</li>
    </ul>
    <hr>
    <ul>
        <h1>对象</h1>
        <li v-for="item in obj" :key="item">{{item}}</li>
    </ul>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                arr:['北京','上海','深圳'],
                obj:{
                    name:'kobe',
                    age:18,
                    sex:'男'
                }
            }
        },
        methods:{
            //修改数组
            handleArr(){
                //通过下标修改数据无法实现响应
                // this.arr[0] = '武汉'
                // this.arr.length=1

            //    vue内部重写了数组方法可以实现数据的响应式
                this.arr.unshift('武汉')
            },
        //    修改对象(无法对添加或删除的属性进行响应)
            handleObj(){
            //    无法对添加或删除的属性进行响应
            //     this.obj.grade = 'university'

            //    通过vue指定的方法来新增或删除属性 this.$set或Vue.set
            //     this.$set(this.obj,'grade','university')
                Vue.set(this.obj,'grade','university')

                this.$delete(this.obj,'grade','university')
                VUe.delete(this.obj,'grade','university')
            }
        }
    })
</script>
</body>
</html>